<template>
    <div class="vehicle-manage-container">
      <el-card>
        <template #header>
          <div class="card-header">
            <div>
              <el-input v-model="searchKeyword" placeholder="搜索车牌号/司机姓名" size="small"
                style="width: 220px; margin-right: 10px" @input="filterTable" />
              <el-button type="primary" icon="Plus" @click="openDialog">新增车辆</el-button>
              <el-button icon="Download" @click="exportTable">导出</el-button>
            </div>
          </div>
        </template>
  
        <el-table :data="filteredData" border>
          <el-table-column prop="plateNumber" label="车牌号" />
          <el-table-column prop="vehicleType" label="车型" />
          <el-table-column prop="capacity" label="最大体积(m³)" />
          <el-table-column prop="driverName" label="司机姓名" />
          <el-table-column prop="driverPhone" label="联系方式" />
          <el-table-column prop="licenseType" label="准驾类型" />
          <el-table-column label="状态">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="启用"
                inactive-value="停用"
                @change="toggleStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140">
            <template #default="scope">
              <el-button size="small" @click="editRow(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteRow(scope.row.plateNumber)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
  
      <el-dialog v-model="dialogVisible" title="车辆信息" width="600px">
        <el-form :model="form" label-width="100px">
          <el-form-item label="车牌号">
            <el-input v-model="form.plateNumber" />
          </el-form-item>
          <el-form-item label="车型">
            <el-input v-model="form.vehicleType" />
          </el-form-item>
          <el-form-item label="最大体积">
            <el-input v-model="form.capacity" type="number" />
          </el-form-item>
          <el-form-item label="司机姓名">
            <el-input v-model="form.driverName" />
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="form.driverPhone" />
          </el-form-item>
          <el-form-item label="准驾类型">
            <el-input v-model="form.licenseType" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveForm">保存</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  
  const searchKeyword = ref('')
  const dialogVisible = ref(false)
  const originalPlate = ref('')
  
  interface Vehicle {
    plateNumber: string
    vehicleType: string
    capacity: number
    driverName: string
    driverPhone: string
    licenseType: string
    status: '启用' | '停用'
  }
  
  const rawData = ref<Vehicle[]>([
  {
    plateNumber: '粤A56326', vehicleType: '厢式货车',
    capacity: 61, driverName: '钱八',
    driverPhone: '13892509510', licenseType: 'C1',
    status: '停用'
},
  {
    plateNumber: '粤B30932', vehicleType: '冷藏车',
    capacity: 25, driverName: '郑一',
    driverPhone: '13885391159', licenseType: 'B2',
    status: '启用'
},
  {
    plateNumber: '粤C18953', vehicleType: '小型货车',
    capacity: 80, driverName: '冯二',
    driverPhone: '13826826454', licenseType: 'C1',
    status: '停用'
},
  {
    plateNumber: '粤D44038', vehicleType: '小型货车',
    capacity: 76, driverName: '孙七',
    driverPhone: '13838237764', licenseType: 'C1',
    status: '启用'
},
  {
    plateNumber: '粤E37662', vehicleType: '高栏车',
    capacity: 22, driverName: '郑一',
    driverPhone: '13861939716', licenseType: 'C1',
    status: '启用'
},
  {
    plateNumber: '粤F39043', vehicleType: '厢式货车',
    capacity: 26, driverName: '孙七',
    driverPhone: '13817734807', licenseType: 'B2',
    status: '启用'
},
  {
    plateNumber: '粤G54476', vehicleType: '小型货车',
    capacity: 51, driverName: '钱八',
    driverPhone: '13881735308', licenseType: 'C1',
    status: '停用'
},
  {
    plateNumber: '粤H24196', vehicleType: '厢式货车',
    capacity: 75, driverName: '赵六',
    driverPhone: '13869712507', licenseType: 'B2',
    status: '停用'
},
  {
    plateNumber: '粤I50386', vehicleType: '高栏车',
    capacity: 33, driverName: '张三',
    driverPhone: '13830846086', licenseType: 'C1',
    status: '启用'
},
  {
    plateNumber: '粤J70248', vehicleType: '冷藏车',
    capacity: 22, driverName: '吴十',
    driverPhone: '13876040162', licenseType: 'B2',
    status: '启用'
},
  {
    plateNumber: '粤K18299', vehicleType: '高栏车',
    capacity: 79, driverName: '郑一',
    driverPhone: '13847022358', licenseType: 'B2',
    status: '停用'
},
  {
    plateNumber: '粤L19526', vehicleType: '冷藏车',
    capacity: 32, driverName: '吴十',
    driverPhone: '13846922649', licenseType: 'C1',
    status: '启用'
},
  {
    plateNumber: '粤M96106', vehicleType: '小型货车',
    capacity: 64, driverName: '赵六',
    driverPhone: '13878891181', licenseType: 'B2',
    status: '启用'
},
  {
    plateNumber: '粤N59184', vehicleType: '冷藏车',
    capacity: 22, driverName: '郑一',
    driverPhone: '13842415261', licenseType: 'C1',
    status: '停用'
},
  {
    plateNumber: '粤O39308', vehicleType: '高栏车',
    capacity: 57, driverName: '吴十',
    driverPhone: '13832289185', licenseType: 'B2',
    status: '启用'
}
])
  const filteredData = ref([...rawData.value])
  
  const form = ref<Vehicle>({
    plateNumber: '',
    vehicleType: '',
    capacity: 0,
    driverName: '',
    driverPhone: '',
    licenseType: '',
    status: '启用'
  })
  
  function openDialog() {
    Object.assign(form.value, {
      plateNumber: '',
      vehicleType: '',
      capacity: 0,
      driverName: '',
      driverPhone: '',
      licenseType: '',
      status: '启用'
    })
    dialogVisible.value = true
  }
  
  function editRow(row: Vehicle) {
    originalPlate.value = row.plateNumber
    form.value = { ...row }
    dialogVisible.value = true
  }
  
  function saveForm() {
    const index = rawData.value.findIndex(item => item.plateNumber === originalPlate.value)
    if (index > -1) {
      rawData.value[index] = { ...form.value }
    } else {
      rawData.value.push({ ...form.value })
    }
    filterTable()
    dialogVisible.value = false
  }
  
  function deleteRow(plateNumber: string) {
    rawData.value = rawData.value.filter(item => item.plateNumber !== plateNumber)
    filterTable()
  }
  
  function toggleStatus(row: Vehicle) {
    const index = rawData.value.findIndex(item => item.plateNumber === row.plateNumber)
    if (index !== -1) {
      rawData.value[index].status = row.status
      filterTable()
    }
  }
  
  function filterTable() {
    const keyword = searchKeyword.value.toLowerCase()
    filteredData.value = rawData.value.filter(item =>
      item.plateNumber.toLowerCase().includes(keyword) ||
      item.driverName.toLowerCase().includes(keyword)
    )
  }
  
  function exportTable() {
    const headers = ['车牌号','车型','最大体积','司机姓名','联系方式','准驾类型','状态']
    const keys = ['plateNumber','vehicleType','capacity','driverName','driverPhone','licenseType','status']
    const csv = [
      headers.join(','),
      ...filteredData.value.map(row =>
        keys.map(k => row[k as keyof Vehicle]).join(',')
      )
    ].join('\n')
  
    const blob = new Blob([csv.replace(/\\\\n/g, '\\n')], { type: 'text/csv;charset=utf-8;' })
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = '车辆数据.csv'
    link.click()
  }
  </script>
  
  <style scoped>
  .vehicle-manage-container {
    padding: 20px;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>
  